<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>金泰物业</title>
	<link rel="stylesheet" href="static/reset.css">
	<link rel="stylesheet" href="static/login.css">
	<!-- favicon 图标 -->
	<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
	<div class="wrapper-login">
		<div class='logo-box'>
			<img src="images/logo-login.png" alt="">
		</div>
		<form class="form-box" action='/pms' method="post" onsubmit="return submitFn()">
			<div class="inp-box user"><input type="text" placeholder="请输入用户名" name="username" id="user"></div>
			<p class="remind remind1" id="remind1">请输入用户名</p>
			<div class="inp-box pass"><input type="password" placeholder="请输入密码" name="password" id="pass"></div>
			<p class="remind remind2" id="remind2">请输入密码</p>
			<div class="btn-box">
				<button class="button submit-button" id="loginBtn" type='submit'>登录</button><button class="button fail-button" id="failBtn">取消</button>
			</div>
		</form>
	</div>
</body>
<script src='js/jquery-1.11.1.js'></script>
<!-- <script src='js/login.js'></script> -->
<script>
	var remind1= $('#remind1'),
	    remind2= $('#remind2');
	 $('#user').blur(function(){
	 	var user = $('#user').val().trim();
	 	if(!user){
			remind1.text('请输入用户名').show();	
		}else{
			remind1.hide();
		}
	 })
	 $('#pass').blur(function(){
	 	var pass = $('#pass').val().trim();
	 	if(!pass){
			remind2.text('请输入密码').show();		
		}else{
			remind2.hide()
		}
	 })
	function submitFn (){
		var user = $('#user').val().trim(),
			pass = $('#pass').val().trim();
		if(!user){
			remind1.text('请输入用户名').show();
			remind2.hide()
			return false;
		}else if(!pass){
			remind1.hide();
			remind2.text('请输入密码').show();
			return false;
		}else if(user!=='admin'){
			remind1.text('用户名输入错误').show();
			remind2.hide();
			return false;
		}else if(pass!=='pass'){
			remind2.text('密码输入错误').show();
			remind1.hide();
			return false;
		}
	}
	$("#failBtn").on('click',function(){
		$('#user').val('');
		$('#pass').val('');
		remind1.hide()
		remind2.hide()
	})
</script>
</html>